<!--
 * @Author: xgq
 * @Date: 2020-05-28 21:47:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-06-05 11:45:19
 * @FilePath: \tuyibo\pages\personalCenter.vue
--> 
<template>
  <div class="personalCenter">
    <div class="backgroundImg"></div>
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="5" style="padding-top:24px;">
          <div class="Avatar">
            <img v-if="person.avatar" :src="person.avatar|getStaticImg" class="Avatar_image"/>
            <el-button type="primary">ID:{{person.id}}</el-button>
            <el-button type="text">成为摄影师</el-button>
          </div>
          <div class="personal">
            <div></div>
            <div :class="{active:tabIndex==1}" @click="tabIndex=1">我的下载</div>
            <div :class="{active:tabIndex==2}" @click="tabIndex=2">我的收藏</div>
            <div :class="{active:tabIndex==3}" @click="tabIndex=3">我的图集</div>
            <div :class="{active:tabIndex==4}" @click="tabIndex=4">编好设置</div>
            <div :class="{active:tabIndex==5}" @click="tabIndex=5">账号管理</div>
            <div></div>
          </div>
          <div class="Ad"><a href="javascript:;"><el-image :src="Ad_image" fill="conten"></el-image></a></div>
        </el-col>
        <el-col :span="19">
          <div class="main">
             <keep-alive>
              <component :is="topicsComponent" :person="person" @change_avatar="change_avatar" @change_nickname="change_nickname" @change_email="change_email" @change_mobile="change_mobile"></component>
            </keep-alive>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import tImg from '../assets/images/covers/big.jpg'
export default {
  name: "personalCenter",
  layout: "image_list",
  components: {
    MyDownload: () => import('@/components/MyDownload.vue'), //我的下载
    MyCollect: () => import('@/components/MyCollect.vue'), //我的收藏
    MyGallery: () => import('@/components/MyGallery.vue'), //我的图集
    Preferences: () => import('@/components/Preferences.vue'), //偏好设置
    AccountSettings: () => import('@/components/AccountSettings.vue'), //账号管理
  },
  data() {
    return {
      person:{
        id:'',
        avatar:"",
        mobile:"",
        nickname:"",
        email:'',
        sex:"",
        register_date:"",//注册日期
        downloads:"",
        praises:""  //点赞数
      },
      Ad_image:tImg,
      topicsComponent: "MyDownload",
      tabIndex: 1,
      styleObject: {
        "background-image": `url('../assets/images/banner.jpg')`,
        "background-size": "cover",
        "background-repeat": "no-repeat",
        "background-position": "top"
      },
      userid: "", //用户id
      nickname: "" //用户名
    };
  },
   watch: {
    'tabIndex': function(v) {
      if (v == 1) {
        this.topicsComponent = 'MyDownload'
      } else if (v == 2) {
        this.topicsComponent = 'MyCollect'
      } else if (v == 3) {
        this.topicsComponent = 'MyGallery'
      }else if(v==4){
        this.topicsComponent='Preferences'
      }else if(v==5){
        this.topicsComponent='AccountSettings'
      }
    }
  },
  mounted() {
    if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
      var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
      this.userid = data.userid;
      this.loadInfo(this.userid)
    }
    // this.userid = this.$route.params.userid;
  },
  methods: {
    change_mobile(v){
      this.person.mobile=v
    },
    change_email(v){
      this.person.email=v
    },
    change_nickname(v){
      this.person.nickname=v
    },
    change_avatar(v){
      this.person.avatar=v
    },
    loadInfo(id){
      this.$axios.post("/api/user/loadUserInfoByUid",{id})
      .then(res=>{
        if(res.data!==null){
          this.person=res.data
        }
      })
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "../assets/css/icon.css";
.personalCenter {
  text-align: center;
  position: relative;
  // min-height: 800px;
  min-width: 900px;
  .backgroundImg {
    height: 54px;
    background: url("../assets/images/01.gif") center center / cover;
  }
  .container {
    max-width: 1380px;
    padding: 0 16px;
    margin: 0 auto 24px;
    .Avatar {
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      height: 200px;
      display: flex;
      flex-direction:column;
      justify-content:space-around;
      align-items:center;
      .Avatar_image{
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    .personal {
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      margin-top: 20px;
      height: 280px;
      display: flex;
      justify-content:space-around;
      flex-direction:column;
      div{
        flex: 1;
        line-height: 40px;
      }
      div:not(:first-child):not(:last-child):hover
      {
        cursor:pointer;
        background-color: #f2f2f2;
      }
      .active{
        background-color: #ddd;
      }
    }
    .Ad{
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      margin-top: 20px;
      height: 130px;
    }
    .main{
      min-height: 700px;
      // max-height: 1200px;
    }
  }
}
</style>
